<template>
    <div class="detailBox">
        <van-cell-group>
            <van-cell v-for="val in detailInfo" :key="val.title" :title="val.title">
                <template>
                    <p v-html="showHTML(val.value)"></p>
                </template>
            </van-cell>
            <div v-for="v in fileList" :key="v.title" class="fileBox">
                <div v-if="v.value && v.value.length">
                    <p class="van-cell-p">{{v.title}}</p>
                    <div class="file-list">
                        <uploadCom :readOnly="true" :defaultFiles="v.value"></uploadCom>
                    </div>
                </div>
                <van-cell v-else :title="v.title" value="暂无" />
            </div>
        </van-cell-group>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                detailInfo: [],
                fileList: []
            }
        },
        methods: {
            // 获取详情数据
            getData (arr = []) {
                this.detailInfo = arr;
            },
            // 获取附件数据
            getFileData (arr = []) {
                this.fileList = arr;
            },
            // 文字内容换行转换
            showHTML (text) {
                return text ? text.toString().replace(new RegExp('\r\n|\n', 'g'), '<br />') : '';
            },
        }
    }
</script>

<style scoped lang="less">
    .fileBox {
        .van-cell-p {
            padding: 10px 16px;
            box-sizing: border-box;
        }
        .file-list {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
    }
    .detailBox .van-cell__value {
        text-align: left;
        color: #323233;
    }
    .detailBox /deep/.van-cell__title {
        flex: inherit;
        width: 90px;
        margin-right: 12px;
        color: #969799;
    }
</style>